

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
 
  </style>
</head>
<body>
  <div id="app">
  	<!-- 使用自定义指令的时候在标签中加上  v-指令的名称 就可以了 -->
   <input type="text" v-color="msg" name="" id="" >
  </div>
  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript">
    /*
      带参数的自定义指令
    */
    Vue.directive('color', {
    	// 这个地方用bind也是一样的跟inserted
    	bind: function(el, binding) { // binding是形参可以改成别的名字

    		// 可以通过binding参数拿到msg的值 msg的值可以是对象
    		
    		// 根据指令获取参数的背景色
    		// console.log(binding.value.color)
    		el.style.backgroundColor = binding.value.color; 
    	}
    })
    var vm = new Vue({
      el: '#app',
      data: {
       msg: {
       	color: 'red'
       }

      },
      methods: {

      }
    });
  </script>
</body>
</html>
